<template>
	<!-- common-list  首页列表组件 -->
	<!-- 列表样式 -->
	<view class="p-2">
		<!-- 头像和昵称  | 关注按钮 -->
		<view class="flex align-center justify-between">
			<view class="flex align-center">
				<!-- 头像 -->
				<view class="mr-2">
					<image :src="item.userpic" lazy-load style="width:65rpx;height: 65rpx;" @click="openSpace">
					</image>
				</view>
				<!-- 文字部分 -->
				<view class="">
					<view class="font " style="line-height: 1.5;">{{item.username}}</view>
					<view class=" font-small" style="color: #9D9589;">发布时间：{{item.newstime}}</view>
				</view>
			</view>

			<!-- 按钮   components-->
			<view v-if="!item.isFollow" class="flex align-center justify-center bg-main text-white rounded
			" style="width: 90rpx;
			height: 50rpx;" hover-class="animate__animated animate__pulse" @click="follow">关注</view>

		</view>
		<!-- 标题 -->
		<view class="font m-1">{{item.title}}</view>
		<!-- 帖子主图 -->
		<view class="">
			<image :src="item.titlepic" class="rounded" style="height: 350rpx;width: 100%;" mode=""></image>
		</view>
		<!-- 点赞、分享等图标按钮 -->
		<view class="flex align-center">
			<view class="flex flex-1 align-center justify-center" hover-class="animate__animated animate__jello"
				@click="doSupport('support')" :class="item.support.type==='support'?'support-active':''">
				<text class="iconfont icon-dianzan2 mr-2"></text>
				<text>{{item.support.support_count>0?item.support.support_count:"支持"}}</text>
			</view>
			<view class="flex flex-1 align-center justify-center" hover-class="animate__animated animate__jello"
				@click="doSupport('unsupport')">
				<text class="iconfont icon-cai mr-2"></text>
				<text>{{item.support.unsupport_count>0?item.support.unsupport_count:"反对"}}</text>
			</view>
			<view class="flex flex-1 align-center justify-center" @click="openDetail()">
				<text class="iconfont icon-pinglun mr-2"></text>
				<text>{{item.comment_count}}</text>
			</view>
			<view class="flex flex-1 align-center justify-center" @click="openDetail()">
				<text class="iconfont icon-fenxiang mr-2"></text>
				<text>{{item.share_num}}</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			item: Object,
			index: Number
		},
		methods: {
			//点击头像打开个人简介页面
			openSpace() {
				console.log("打开个人空间");
			},
			//关注按钮功能
			follow() {
				// console.log("点击关注");
				//通知父组件 index 此关注按钮被点击了
				this.$emit('follow', this.index)
			},
			//顶踩功能  type 有两种形态 由具体传入的数据决定 目前有bug
			doSupport(type) {
				//console.log("顶或者踩");
				this.$emit('doSupport', {
					type,
					index: this.index
				})
			},
			//帖子详情页
			openDetail() {
				console.log("打开帖子的详情页");
			}
		}
	}
</script>

<style>
	.support-active {
		color: #ff4a6a;
	}
</style>